<template>
  <modal :visible="visible" position="center">
    <view class="join-member-modal" :class="{ 'has-bind': hasBind }">
      <view class="title">加入会员享专属权益</view>
			<image class="model-icon" src="https://100000063-1252208446.file.myqcloud.com/images/macallan-remvp/member_icon.png" mode="widthFix"></image>
      <view class="icon-list">
        <view class="icon-item" v-for="(item, index) in iconList" :key="index">
          <image :src="item.url" mode="widthFix"></image>
          <view class="icon-text">{{ item.text }}</view>
        </view>
      </view>
      <view class="checkbox-item" @click.stop="onChangeRuleCheck">
        <m-checkbox
          :value="ruleCheck"
          :size="32"
          :custom-style="{ marginTop: '6rpx' }"
        />
        <view class="checkbox-text">
			<view class="line-text" style="color: #757575;">
				内容涉及酒类知识及其他相关信息，请确认您已满18周岁
			</view>
         <!-- <view class="line-text">
            我已阅读并接受《<text
              class="underline checkbox-text-link"
              @click.stop="onLinkClick"
            >
              <text class="chat-en">THE MACALLAN</text>
            </text></view
          > -->
        <!--  <view class="line-text"
            ><text
              class="underline checkbox-text-link"
              @click.stop="onLinkClick"
            >
              <text class="chat-en">SOCIETY</text>
              会员规则</text
            >》</view
          >-->
        </view>
      </view>
      <view class="btn-wrap">
        <button @click.stop="onCancel" class="common-btn subsidiary btn">
          取消
        </button>
        <button
          v-if="ruleCheck"
          open-type="getPhoneNumber"
          @getphonenumber="onGetPhoneNumber($event, 'NEW_USER')"
          class="common-btn btn"
        >
          确认
        </button>
        <button
          v-else
          @click.stop="onConfirm('NEW_USER')"
          class="common-btn btn"
        >
          确认
        </button>
      </view>
     <block v-if="hasBind">
        <button
          v-if="ruleCheck"
          class="bind"
          open-type="getPhoneNumber"
          @getphonenumber="onGetPhoneNumber($event, 'OLD_USER')"
        >
          我已注册会员，立即绑定
        </button>
        <button v-else class="bind" @click.stop="onConfirm('OLD_USER')">
          我已注册会员，立即绑定
        </button>
      </block>
    </view>
  </modal>
</template>

<script>
import modal from "../modal/modal.vue";
import mCheckbox from "../m-checkbox/m-checkbox.vue";
import { navigateToMemberRule } from "./utils";
import tip from "@/utils/tip";
import registerController from "./RegisterController";
import RegisterTracker from "./RegisterTracker";

export default {
  name: "join-member-modal",
  components: { modal, mCheckbox },
  props: {
    // 使用页面
    location: {
      type: String,
      default: "home",
    },
  },
  data() {
    return {
      visible: false,
      ruleCheck: false,
      hasBind: true,
      isBind: false,
      iconList: [
        {
          url: "https://100000063-1252208446.file.myqcloud.com/images/macallan-remvp/icon1.png",
          text: "专享购买",
        },
        {
          url: "https://100000063-1252208446.file.myqcloud.com/images/macallan-remvp/icon2.png",
          text: "专属福利",
        },
        {
          url: "https://100000063-1252208446.file.myqcloud.com/images/macallan-remvp/icon3.png",
          text: "品牌特邀",
        },
        {
          url: "https://100000063-1252208446.file.myqcloud.com/images/macallan-remvp/icon4.png",
          text: "新品通知",
        },
      ],
    };
  },
  methods: {
    open() {
      this.visible = true;
      this.$commonSensors.registerPopupExposure('入会弹窗')
      // this.$commonSensors.popupEvent('PopupExposure', {'popup_type' : '会员注册/绑定', 'popup_name': '入会弹窗'})
    },
    close() {
      this.visible = false;
    },
    onChangeRuleCheck() {
      this.ruleCheck = !this.ruleCheck;
    },
    onLinkClick(e) {
      navigateToMemberRule();
    },
    onCancel() {
      RegisterTracker.authViprules({
        btnName: "稍后加入",
        registerType: "NORMAL",
      });
      this.close();
      // 稍后加入、立即加入、立即绑定
      this.$commonSensors.commonPopupClick('RegisterPopupClick', '入会弹窗', '稍后加入')
      // this.$commonSensors.popupEvent('PopupClick', {'popup_type' : '会员注册/绑定', 'popup_name': '入会弹窗', 'button_name': '稍后加入'})
    },
    onConfirm(type) {
      if (type === "NEW_USER") {
        RegisterTracker.authViprules({
          btnName: "立即加入",
          registerType: "NORMAL",
        });
        this.$commonSensors.commonPopupClick('RegisterPopupClick', '入会弹窗', '立即加入')
        // this.$commonSensors.popupEvent('PopupClick', {'popup_type' : '会员注册/绑定', 'popup_name': '入会弹窗', 'button_name': '立即加入'})
      } else {
        RegisterTracker.bindVip();
        getApp().commonssPopupTrack('PopupClick', {'popup_type' : '会员注册/绑定', 'popup_name': '入会弹窗', 'button_name': '我已注册会员，立即绑定'})
        this.$commonSensors.commonPopupClick('RegisterPopupClick', '入会弹窗', '立即绑定')
        // this.$commonSensors.popupEvent('PopupClick', {'popup_type' : '会员注册/绑定', 'popup_name': '入会弹窗', 'button_name': '立即绑定'})
      }
      tip.plainText("请确认您已阅读并同意会员规则");
    },
    async onGetPhoneNumber(e, type) {
      let that = this
      uni.showLoading({
        title: "正在加载",
      });
      if (type === "NEW_USER") {
        RegisterTracker.authViprules({
          btnName: "立即加入",
          registerType: "NORMAL",
        });
      } else {
        getApp().commonssPopupTrack('PopupClick', {'popup_type' : '会员注册/绑定', 'popup_name': '入会弹窗', 'button_name': '我已注册会员，立即绑定'})
        RegisterTracker.bindVip();
      }
      const app = getApp();
      const res = await registerController.getPhoneNumberData(e, {
        location: this.location,
      });
      this.close();
      that.$commonSensors.registerAuthorization(type === "OLD_USER" ? '绑定' : '注册', res.success)
      if (res.success) {
        const { phoneNumber } = res.data;
        const phoneNumberReg = /^1\d{10}$/;
        if(!phoneNumberReg.test(phoneNumber)){
          uni.hideLoading();
          this.$emit('confirm',{messageModalCode:'OVERSEAS_MEMBER'})
          return
        }
        const userCheckResult =
          type === "OLD_USER"
            ? await registerController.oldUserCheck(phoneNumber)
            : await registerController.newUserCheck(phoneNumber);
        uni.hideLoading();
        this.$emit("confirm", userCheckResult);
        if (userCheckResult.joinMemberSuccess) {
          this.$emit("registerSuccess", userCheckResult);
        }
        that.$sensors.register({
        	is_phone_authorized: true
        });
        that.$commonSensors.commonPopupClick('RegisterPopupClick', '入会弹窗', type === "OLD_USER" ? '立即绑定' : '立即加入')
        // this.$commonSensors.popupEvent('PopupClick', {'popup_type' : '会员注册/绑定', 'popup_name': '入会弹窗', 'button_name': type === "OLD_USER" ? '立即绑定' : '立即加入'})
      } else {
        uni.hideLoading();
        that.$sensors.register({
        	is_phone_authorized: false
        });
      }
    },
  },
};
</script>

<style lang="scss">
@import "./common.scss";

.join-member-modal {
  width: 654rpx;
	// height:896rpx;
  // padding-bottom: 56rpx;
  background: #fff;
  display: flex;
  align-items: center;
  // justify-content: center;
  flex-direction: column;
  font-family: FrankNew-Regular,NotoSansSC-Regular;

  &.has-bind {
    // padding-bottom: 48rpx;
    padding-bottom: 96rpx;
  }
  .model-icon{
	  width: 182rpx;
	  height: 57rpx;
	  padding-top: 20rpx;
  }

  .title {
    padding-top: 128rpx;
    font-size: 36rpx;
    font-weight: 500;
	// font-family:'NotoSansSC-Regular';
	font-family: NotoSansSC-Medium;

	color:#000;
    line-height: 52rpx;
  }

  .icon-list {
    padding-top: 80rpx;
    width: 526rpx;
    display: flex;
    flex-direction: row;
    // flex-wrap: wrap;
    justify-content: space-between;

    .icon-item {
      text-align: center;
      padding-top: 20rpx;

      image {
        display: block;
        width: 96rpx;
        height: 96rpx;
      }

      .icon-text {
        padding-top: 16rpx;
        font-size: 24rpx;
        line-height: 20rpx;
        color: #757575;
        font-family: NotoSansSC-Regular;

      }
    }
  }

  .checkbox-item {
    display: flex;
    box-sizing: border-box;
    width: 100%;
    margin-top: 100rpx;
    padding-left: 72rpx;
    padding-right: 72rpx;

    .checkbox-text {
      margin-left: 16rpx;
      font-size: 26rpx;
      line-height: 36rpx;
      letter-spacing: 0.01em;
    }
  }

  .btn-wrap {
    padding-top: 52rpx;
    display: flex;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
    padding: 52rpx 50rpx 0 50rpx;
  }

  .bind {
    padding: 0;
    margin: 0;
    outline: none;
    color: #757575;
    background: transparent;
    font-family: NotoSansSC-Regular;
    margin-top: 60rpx;
    text-align: center;
    line-height: 31rpx;
    font-size: 22rpx;
    border-bottom: 1px solid #757575;
  }
}

// 宽屏间距调大
@media screen and (min-width: 390px) {
  .join-member-modal {
    .line-text {
		color: #757575;
		font-family:FrankNew-Regular,NotoSansSC-Regular;
      letter-spacing: 0.02rem;
    }
  }
}

@media screen and (min-width: 428px) {
  .join-member-modal {
    .line-text {
		font-family:FrankNew-Regular,NotoSansSC-Regular;
		color: #757575;
      letter-spacing: 0.076rpx;
    }
  }
}
</style>
